<template>
  <div class="points-order">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="积分订单"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 订单列表 -->
    <div class="order-list">
      <div class="order-item" v-for="(item, index) in orderList" :key="item._id">
        <!-- 订单头部 -->
        <div class="order-header">
          <span class="order-type">{{ item.type }}</span>
          <span class="order-status">{{ item.status }}</span>
        </div>

        <!-- 商品信息 -->
        <div class="order-content" @click = 'goorderdetail(item._id)'>
          <div class="product-info">
            <div class="points-info">积分消耗：{{ item.points }}</div>
            <div class="time-info">下单时间：{{ formatDate(item.createTime) }}</div>
          </div>
        </div>

        <!-- 收货地址 -->
        <div class="address-info">
          <div class="address-title">收货信息</div>
          <div class="address-content">
            <div class="receiver">
              <span class="name">{{ item.address.receiver }}</span>
              <span class="phone">{{ item.address.phone }}</span>
            </div>
            <div class="address">{{ item.address.address }}</div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <van-empty v-if="orderList.length === 0" description="暂无订单" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { formatDate } from '../utils/date'
// import { Toast } from 'vant'
import { getUserOrders } from '../api/order'

const router = useRouter()
const userId = localStorage.getItem('userId')
const orderList = ref([])
const  goorderdetail = (id) => {
  router.push(`/order-detail/${id}`)
}
const getOrderList = async () => {
  try {
    const res = await getUserOrders(userId)
    console.log(res)
    orderList.value = res
  } catch (err) {
    console.log(err)
  }
}

// 返回上一页
const onClickLeft = () => {
  router.back()
}

onMounted(() => {
  getOrderList()
})
</script>

<style scoped>
.points-order {
  min-height: 100vh;
  background: #f5f5f5;
}

.order-list {
  padding: 12px;
}

.order-item {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 16px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}

.order-type {
  font-size: 16px;
  font-weight: 500;
}

.order-status {
  color: #ff6b00;
  font-size: 14px;
}

.order-content {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}

.product-info {
  flex: 1;
}

.points-info {
  font-size: 15px;
  color: #ff6b00;
  margin-bottom: 8px;
}

.time-info {
  font-size: 14px;
  color: #666;
}

.address-info {
  background: #f8f8f8;
  border-radius: 4px;
  padding: 12px;
}

.address-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.address-content {
  font-size: 14px;
}

.receiver {
  margin-bottom: 4px;
}

.name {
  margin-right: 12px;
  font-weight: 500;
}

.phone {
  color: #666;
}

.address {
  color: #333;
  line-height: 1.4;
}
</style> 